<template>
	<view>
		<!-- <view class="order_container">
			<uni-list :border="true" v-for="(item,index) in orderList" :key="index" v-if="orderList.length!=0">
				<u--text bold="true" text="租借充电宝"></u--text>
				<u--text align="rigth" :text="item.cabinet.cabinetNo"></u--text>
			</uni-list>
		</view> -->

		<z-paging ref="paging" v-model="dataList" @query="queryList">
			<view class="item" v-for="(item,index) in dataList" :key="index">
				<uni-card :is-shadow="false" is-full is-shadow >
					<view style="display: flex;" @click="toOrderInfo(item)">
						<u--text bold="true" text="租借充电宝"></u--text>
						<u--text v-if="item.status == 0"  type="warning" align="rigth" text="使用中"></u--text>
						<u--text v-else-if="item.status == 1" type="warning"  align="rigth" text="待支付"></u--text>
						<u--text v-else align="rigth" text="已完成"></u--text>
						<u-icon name="arrow-right"></u-icon>
					</view>
					<view>
						<u--text size="12" :text="`订单编号: ${item.orderNumber}`"></u--text>
					</view>					
					<view>
						<u--text size="12" :text="`租借时间: ${item.beginAt}`"></u--text>
					</view>
					<view>
						<u--text size="12" :text="`租借地点: ${item.cabinet.merchant.address}`"></u--text>
					</view>
					<view v-if="item.status != 0">
						<u--text size="12" :text="`使用时长: ${$util.convertSecondsToTime(item.totalSeconds)}`"></u--text>
					</view>										
					<view  v-if="item.status != 0" style="display: flex;justify-content: flex-end;">
						<view><u--text style="border: 5px solid red;" align="right" bold="true" text="应付费用: "></u--text></view>
						<view><u--text style="border: 5px solid red;" align="right" bold="true" :text="`¥${item.actuallyAmount}`"></u--text></view>
						
					</view>
				</uni-card>
			</view>
		</z-paging>
	</view>

	<!-- <view v-show="current == 1">暂无优惠卡订单</view> -->
	</view>
</template>

<script>
	let that;
	export default {
		data() {
			return {
				dataList: [],
			}
		},
		components: {},
		props: {},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			that = this;
		},

		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {},
		methods: {
			toOrderInfo(orderInfo){
				if(orderInfo.status == 0){
					uni.navigateTo({
						url: '/pages/orders/order-use?orderId=' + orderInfo.id
					});
				}else if(orderInfo.status == 1){
					uni.navigateTo({
						url: '/pages/orders/order-pay?orderId=' + orderInfo.id
					});
				}else{
					uni.navigateTo({
						url: '/pages/orders/order-info?orderId=' + orderInfo.id
					});
				}

			},
			queryList(pageNo, pageSize) {
				//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				//这里的请求只是演示，请替换成自己的项目的网络请求，并在网络请求回调中通过this.$refs.paging.complete(请求回来的数组)将请求结果传给z-paging
				this.$http_api.ordersList({
					current: pageNo,
					pageSize: pageSize
				}).then(res => {
					//请勿在网络请求回调中给dataList赋值！！只需要调用complete就可以了
					this.$refs.paging.complete(res);
				}).catch(res => {
					//如果请求失败写this.$refs.paging.complete(false)，会自动展示错误页面
					//注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
					//在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
					this.$refs.paging.complete(false);
				})
			},
		}

	}
</script>

<style>

</style>